<template>
    <div class="box">
      <h4>收货地址</h4>
      <div class="area_list">
        <ul>
          <li v-for="(item , index) in addressItems" :key="index">
            <div class="user_info">
              <p>{{item.name}}</p>
              <span>{{item.tel}}</span>
            </div>
            <div class="area_details">
              <span v-if="defaultAddress === index">[默认]</span>
              <span v-else @click="setDefault(index)">[设置默认地址]</span>
              {{item.area}}{{item.detail}}
            </div>
            <div class="btn_box">
              <div>
                <i><img src="../../../../static/images/compile.png"  mode="widthFix" alt=""></i>
                <span>编辑</span>
              </div>
              <div @click="delAddress(index)">
                <i><img src="../../../../static/images/delete.png"  mode="widthFix" alt=""></i>
                <span>删除</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content_block">
        <button class="button">新增地址 </button>
      </div>
    </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        addressItems:[
          {name:'张三',tel:15412345678,area:'河南省郑州市高新区',detail:'梧桐街地铁A口大学科技园1号楼1012室'},
          {name:'张小三',tel:15412345678,area:'河南省郑州市高新区',detail:'梧桐街地铁A口大学科技园1号楼1012室'},
        ],
        defaultAddress :0
      }
    },
    methods:{
      //修改默认地址
      setDefault(index){
        let _that = this
        wx.showModal({
          content: '你确认将当前地址设置为默认地址吗？',
          confirmText: "确认",
          cancelText: "取消",
          success: function (res) {
            if (res.confirm) {
              _that.defaultAddress = index
            }else{

            }
          }
        })
      },
    //  删除地址
      delAddress(index){
        let _that = this
        wx.showModal({
          content: '你确认删除当前地址吗？',
          confirmText: "确认",
          cancelText: "取消",
          success: function (res) {
            if (res.confirm) {

            }else{

            }
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../../static/css/basis";
  h4 {
    width: 100%;
    height: 72rpx;
    margin-bottom:2vw;
    padding: 14rpx 30rpx 0;
    color: #2C2C2C;
    line-height: 1.6;
    font-size: 38rpx;
    font-weight: bold;
    background-color: #fff;
  }
  .content_block {
    margin: 35px 0;
    padding: 0 15px;
    color: #6d6d72;
    box-sizing: border-box;
    button {
      color: #fff;
      background: #f60;
      border-color: transparent;
      font-size: 17px;
      height: 44px;
      display: block;
      text-align: center;
      font-family: inherit;
      cursor: pointer;
      outline: 0;
      border-radius: 5px;
      width: 100%;
    }
  }
  .area_list {
    line-height: 2.2;
    ul {
      li{
        margin-bottom: 2vw;
        background-color: #fff;
        .btn_box{
          display: flex;
          justify-content: flex-end;
          border-top: 1px dashed #666;
          font-size: 28rpx;
          div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 20rpx;
            span {
              line-height: 1.6;
              font-size: 28rpx;
            }
          }
          img{
            width: 34rpx;
          }
        }
      }
    }
  }
  .user_info{
    display: flex;
    justify-content: space-between;
    padding: 30rpx 30rpx 0;
  }
  .area_details {
    padding: 0 30rpx 30rpx;
    font-size: 28rpx;
    span {
      color: red;
    }
  }
</style>
